<template>
	<div class="cameras-ai-video-top">
		<div class="title">
			<div class="tips">
				<div class="font-12">第二步</div>
				<p>绘制识别区域</p>
			</div>

			<a-button type="primary" :disabled="cDisabled('savebtn')" :loading="pageControlState.saveBtnLoading" @click="emits('on-save')"
				>保存</a-button
			>
		</div>

		<div class="cameras-ai-video-top-main">
			<!-- 视频上面 -->
			<div class="mark-control">
				<!-- 绘制区域 -->
				<div class="mark-control-left">
					<a-radio-group
						class="radio-group"
						size="small"
						:value="pageControlState.videoDrawSwitch"
						button-style="solid"
						:disabled="cDisabled('default')"
						@change="SwitchCheckedChange"
					>
						<a-radio-button :value="true" style="color: #f0f6fc" :disabled="cDisabled('tab')">全屏</a-radio-button>

						<a-radio-button :value="false" style="color: #f0f6fc">自定义</a-radio-button>
					</a-radio-group>
					<template v-if="pageControlState.videoDrawSwitch === false">
						<div v-if="canvasState.drawType !== 2" class="info-text">
							<global-svg-icon icon-name="shape-fill" width="20px" height="20px" style="margin-right: 8px"></global-svg-icon>
							<div>
								单击鼠标左键开始绘图，需点击3次或以上以形成封闭图形。双击左键完成绘制。鼠标放入区域按住左键移动图形，按【delete】键删除已选图形。允许最多创建50个图形。
							</div>
						</div>
						<div v-else class="info-text">
							<global-svg-icon icon-name="line" width="20px" height="20px" style="margin-right: 8px"></global-svg-icon>
							<div>
								单击鼠标左键开始创建点，两点之间形成直线。双击左键完成绘制。鼠标放在直线上按住左键移动，按【delete】键删除已选直线。允许最多创建50条直线。
							</div>
						</div>
					</template>
				</div>
				<div class="mark-control-right">
					<a-select
						v-model:value="personValue"
						show-search
						style="width: 200px"
						placeholder="请选择"
						allow-clear
						:options="personList"
						:filter-option="false"
						@search="getPersonList"
					>
						<template #notFoundContent v-if="personLoading">
							<a-spin size="small"></a-spin>
						</template>
					</a-select>
					<a-button v-if="props.pageControlState.videoDrawSwitch === false" :disabled="cDisabled('del-btn')" @click="emits('on-del')"
						>删除</a-button
					>
					<a-button v-if="props.pageControlState.videoDrawSwitch === false" :disabled="cDisabled('btn')" @click="emits('on-clear')"
						>清屏</a-button
					>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import type { PageControlState, CanvasState } from '../../../type';
import httpServe from '@/global-services';
type TsProps = {
	canvasState: CanvasState;
	pageControlState: PageControlState;
};
const props = withDefaults(defineProps<TsProps>(), {
	canvasState: () => {
		return {} as CanvasState;
	},
	pageControlState: () => {
		return {} as PageControlState;
	}
});
const emits = defineEmits<{
	(e: 'on-switch', checked: boolean): void;
	(e: 'on-select', personValue: string): void;
	(e: 'on-clear'): void;
	(e: 'on-save'): void;
	(e: 'on-del'): void;
}>();
const personValue = ref();
watch(personValue, (newValue) => {
	emits('on-select', newValue);
});
// 通知人员
const personLoading = ref(false);
const personList = ref<any[]>([]);
const getPersonList = async (searchVal?: any) => {
	personList.value = [];
	personLoading.value = true;
	const res: any = await httpServe.getHttp('/base/zelo/user/list')(!searchVal ? {} : { name: searchVal });
	if (res.code === 0) {
		personList.value = res.data.map((i: any) => {
			return { label: `${i.name}(${i.phone})`, value: i.id };
		});
	}
	personLoading.value = false;
};
getPersonList();
const cDisabled = computed(() => {
	return (type: string) => {
		// 视频未加载成功
		if (!props.pageControlState.isLoadVideoSuccess) {
			return true;
		}
		// 保存按钮
		if (type === 'savebtn') {
			return !(props.pageControlState.isEdit || props.canvasState.isEditCavans);
		}
		// 未选择任何ai算法服务 全屏和自定义按钮禁用
		if (typeof props.pageControlState.videoDrawSwitch !== 'boolean') {
			return true;
		}
		if (type === 'btn') {
			return props.pageControlState.videoDrawSwitch === true || !props.canvasState.canvas?.getObjects().length;
		} else if (type === 'del-btn') {
			return props.pageControlState.videoDrawSwitch === true || !props.canvasState.selectGraph;
		} else if (type === 'tab') {
			return props.pageControlState.switchCheckedDisabled || props.canvasState.drawType === 2;
		}

		return false;
	};
});
defineExpose({
	personValue
});
/**
 * 全屏｜自定义 切换
 * @param selected  是否选中
 */
const SwitchCheckedChange = (e: any) => {
	personValue.value = null;
	emits('on-switch', e.target.value);
};
</script>

<style lang="less" scoped>
.cameras-ai-video-top {
	width: 100%;
	color: @white;

	.title {
		display: flex;
		margin-bottom: 14px;
		font-weight: 700;
		text-align: left;
		color: #f0f6fc;
		align-items: flex-start;
		justify-content: space-between;

		.tips {
			display: flex;
			align-items: center;
			gap: 8px;

			> div {
				border: 1px solid rgba(255, 255, 255, 0.12);
				border-radius: 5px;
				padding: 2px 6px;
				font-family: 'D-DIN-BOLD';
				font-weight: 400;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 100%);
			}
		}
	}

	.cameras-ai-video-top-main {
		display: flex;
		height: var(--cameras-video-top-height);
		border-bottom: 1px solid rgba(0, 0, 0, 0.3);
		border-radius: 8px 8px 0 0;
		padding: 0 16px;
		background-color: #1a1f2b;
		align-items: center;

		.mark-control {
			display: flex;
			width: 100%;
			align-items: center;
			max-height: 58px;
			justify-content: space-between;

			.mark-control-left {
				display: flex;
				align-items: center;

				.radio-group {
					display: table;
					overflow: hidden;
					border: 1px solid rgba(255, 255, 255, 0.1);
					border-radius: 6px;
					white-space: nowrap;

					:deep(.ant-radio-button-wrapper) {
						height: 32px !important;
						border: none;
						line-height: 32px;
						outline: none;
					}
				}

				.info-text {
					display: flex;
					margin: 0 24px;
					font-size: 12px;
					line-height: 20px;
					color: @text03;
					align-items: center;
				}
			}

			.ant-radio-button-wrapper-checked {
				border: 1px solid @borderColor02;
				background: @primary01 !important;
			}

			.ant-radio-button {
				border-radius: 6px 0 0 6px;
				padding: 14px;
			}

			.ant-radio-button-wrapper {
				width: 70px;
				height: 30px;
				border: 1px solid @borderColor02;
				line-height: 30px;
				text-align: center;
				background: @background01;
				box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
			}

			:where(.css-dev-only-do-not-override-3m4nqy).ant-radio-button-wrapper:not(:first-child)::before {
				background: none !important;
			}

			.mark-control-right {
				display: flex;
				gap: 8px;

				.edit-btn,
				.ant-select-selector,
				.ant-btn {
					display: flex;
					height: 30px !important;
					border: 1px solid @borderColor02;
					border-radius: 6px;
					padding: 7px 14px;
					box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
					justify-content: center;
					align-items: center;
					gap: 6px;
					cursor: pointer;
				}
			}
		}
	}

	.add-con-btn {
		display: flex;
		width: 138px;
		height: 30px;
		border-radius: 6px;
		padding: 7px 14px;
		background: #1868e9 !important;
		box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
		justify-content: center;
		align-items: center;
		gap: 6px;
		cursor: pointer;
	}
}
</style>
